<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  <title>柳的小世界</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/bootstraps.css"></head>
<body>
  <!--导航部分-->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="conts">
        <div class="name-phone">
          <img src="img/logo.jpg" class="img-circle"/>
          <span class="text">柳</span>
        </div>        
      </div>
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse home" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right " >
          <li>
            <a href="index.html" class="active">首页</a>
          </li>
          <li>
            <a href="resume.html" target="_blank">个人资料</a>
          </li>
          <li>
            <a href="product.html" target="_blank">作品</a>
          </li>
          <li>
            <a href="wapTip.html" target="_blank">前端仓库</a>
          </li>          
        </ul>
      </div>
    </div>
  </nav>
  <!--内容部分-->
  <div class="content1">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <ul class="row">
            <li class="col-md-4 col-lg-4">
              <div class="col-sm-offset-1 col-md-11">
              <div class="col-tit">
              通过分析github代码库总结出来的工程师代码书写习惯
              </div>
              <p>
                Code Guide by <b>AlloyTeam</b>
              </p>
              <img src="img/p1.png" />
              <p>
               Standards for developing flexible, durable, and sustainable HTML and CSS, and maintainable JavaScript
              </p>
              <a target="_blank" href="http://alloyteam.github.io/CodeGuide/">
                前往 <b class="caret caret1"></b>
              </a>
              </div>
            </li>
            <li class="col-md-4 col-lg-4">
              <div class="col-sm-offset-1 col-md-11">
              <div class="col-tit">
              一探前端开发中的JS调试技巧
              </div>
              <p>
                Post by <b>郑武江</b>
              </p>
              <img src="img/p2.gif" />
              <p>
               调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。
              </p>
              <a target="_blank" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=403029188&idx=1&sn=9c8249b8c4a3b60e0ff3db3e7e89faa0&scene=4#wechat_redirect">
                前往 <b class="caret caret1"></b>
              </a>
              </div>
            </li>
            <li class="col-md-4 col-lg-4">
              <div class="col-sm-offset-1 col-md-11">
              <div class="col-tit">
              12个不可不知的Sublime Text应用技巧和诀窍
              </div>
              <p>
                Post by <b>沙渺</b>
              </p>
              <img src="img/p3.png" />
              <p>
               本文为您提供Sublime Text编辑器的12个技巧和诀窍，深入挖掘这个看似简洁的代码编辑器，背后所隐藏的实现各种高级功能的无限可能。
              </p>
              <a target="_blank" href="https://segmentfault.com/a/1190000000505218?utm_source=tuicool&utm_medium=referral">
                前往 <b class="caret caret1"></b>
              </a>
              </div>
            </li>
            <li class="col-md-4 col-lg-4">
              <div class="col-sm-offset-1 col-md-11">
              <div class="col-tit">
              一探前端开发中的JS调试技巧
              </div>
              <p>
                Post by <b>郑武江</b>
              </p>
              <img src="img/p2.gif" />
              <p>
               调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。
              </p>
              <a target="_blank" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=403029188&idx=1&sn=9c8249b8c4a3b60e0ff3db3e7e89faa0&scene=4#wechat_redirect">
                前往 <b class="caret caret1"></b>
              </a>
              </div>
            </li>
          </ul>

          <div class="ipt">
              <a type="button" class="btn1" >上一页</a>
              <a type="button" class="btn2">下一页</a>
          </div>
        </div>
        <div class="col-md-4 col-lg-4 info-right hidden-xs hidden-sm">
          <div class="infos">
            <div class="col-tit">关于其他</div>
            <a target="_blank" href="https://zhuanlan.zhihu.com/p/19854703?columnSlug=prattle">如何快速掌握一门技术
            </a>
             <a target="_blank" href="http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html">
              自适应网页设计（Responsive Web Design）
            </a>
             <a target="_blank" href="https://zhuanlan.zhihu.com/p/23265155">
            前端网老姚浅谈：怎么学JavaScript？
            </a>
             <a target="_blank" href="https://gold.xitu.io/post/5835853f570c35005e413b19">
            三张图搞懂JavaScript的原型对象与原型链
            </a>
             <a target="_blank" href="http://www.cnblogs.com/coco1s/p/5948383.html">
            谈谈一些有趣的CSS题目（七）-- 消失的边界线问题
            </a>
             <a target="_blank" href="https://zhuanlan.zhihu.com/p/23629993">
            自学前端开发：代码之外要关注的问题
            </a>
          </div>              
        </div>
      </div>
    </div>
  </div>
  <!--尾部部分-->
  <div class="footer">
    <div class="container cen">
      <div class="col-md-12 col">
        <b class="fl ico"></b>
        <div class=" sp">
          <p>Copyrights 2017 liuliu</p>
          <p class="tc">All rights reserved</p>
        </div>
      </div>      
    </div>
  </div>
</body>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</html>

